<template>
  <VPage class="app-container">
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <el-input v-model="form.sku" placeholder="SKU" class="w-50"></el-input>
        <el-input v-model="form.fn_sku" placeholder="第三方SKU" class="w-50"></el-input>
        <SelectWarehouse v-model="form.warehouse_id" placeholder="仓库" :multiple="true"></SelectWarehouse>
        <el-select class="selectClass" v-model="form.wms_attribute" placeholder="仓库类型" collapse-tags multiple>
          <el-option v-for="item in options['base.warehouse']?.[0].wmsAttributeType" :key="item.value" :label="item.label"
            :value="item.value"></el-option>
        </el-select>
        <SelectPlatform v-model="form.wms_platform" placeholder="平台"></SelectPlatform>
        <VGroup>
          <div class="group-label">更新时间</div>
          <el-date-picker v-model="form.timeRange.value" type="daterange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" :default-time="defaultTime()" style="max-width: 300px" />
        </VGroup>
      </template>
      <template #toolbar_btns>
      </template>
    </VTable>
    <ComModal ref="ComModalRef" :wareDataList="wareDataList" @query="query"></ComModal>
  </VPage>
</template>
<script setup name="OverseasWarehouseWarehouseStock" lang="jsx">
import { ElMessage } from 'element-plus'
import { ref, reactive, toRefs } from 'vue'
import { getEnums } from '@/api/public'
import { querySeawareList } from './api'
import ComModal from './components/ComModal.vue'
import SelectWarehouse from '@/components/SelectWarehouse'
import SelectPlatform from '@/components/SelectPlatform'

const tableRef = ref()
const tableOptins = reactive({
  rowConfig: { height: 60 },
  formConfig: {
    data: {
      timeRange: { type: 'update_time', value: [], range: true },
    }
  },
  columns: [
    {
      type: "seq", title: '序号', width: 80
    },
    {
      field: 'sku', title: 'SKU', width: 210
    },
    {
      field: 'fn_sku', title: 'FNSKU', width: 210
    },
    {
      field: 'sku_cn_title', title: '产品名称', width: 300
    },
    {
      field: 'logistics_name', title: '图片', width: 200, slots: {
        default: ({ row }) => {
          return <div> {row.image.map(i => {
            return <VImage src={i} width={60} height={60}></VImage>
          })
          } </div>
        }
      }
    },
    {
      field: 'warehouse_name', title: '仓库', width: 120
    },
    {
      field: 'transit_num', title: '在途库存', width: 120
    },
    {
      field: 'op_now_num', title: '当前库存', width: 120
    },
    {
      field: 'num', title: '可用库存', width: 120
    },
    {
      field: 'lock_num', title: '锁库', width: 120
    },
    {
      field: 'update_time', title: '更新时间', width: 180
    },
    {
      title: '操作', width: "140", fixed: "right", slots: {
        default: ({ row }) => {
          return <div class="table-option">
            <div>
              <el-link type="primary" underline={false} class="mr-2" onClick={() => open('view', row.id)}>查看记录</el-link>
            </div>
          </div >
        }
      }
    }
  ],
  proxyConfig: {
    seq: true,
    props: {
      result: 'data',
      total: 'total',
    },
    ajax: {
      query: async ({ page, form }) => {
        const res = await querySeawareList({ ...form, ...page })
        return new Promise(function (resolve) {
          resolve({
            data: res.data,
            total: res.total
          })
        })
      }
    }
  }
})
const query = () => {
  tableRef.value.query()
}

const data = reactive({
  options: [],
  wareDataList: [],
  floorList: [],
  areaList: []
})
const { options, wareDataList, floorList, areaList } = toRefs(data)

// 获取枚举类
const fetchOption = async () => {
  getEnums({
    version: "v1", "name": [
      "base.warehouse"
    ]
  }).then(res => {
    options.value = res.data
  })
}
fetchOption()

const changeLogistics = async (val) => {
  console.log(val)
}

//获取已选中的行
const getSelectRow = () => {
  return tableRef?.value.$table.getCheckboxRecords()
}


const handleDistribution = async (id) => {
  const records = getSelectRow().map(i => {
    return i.id
  })
  if (!id) {
    if (records.length == 0) {
      ElMessage.error('请先选择行')
      return
    }
  }
  const ids = id ? [id] : records
  try {
    const res = await orderDistribution({
      id: ids
    })
    ElMessage.success('操作成功')
    query()
  } catch (e) {
    throw Error(e)
  }
}

const ComModalRef = ref()
const open = (type, id) => {
  ComModalRef.value.open(type, id)
}

</script>